<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="title">加班申请</text>
    </view>

    <!-- 加班表单 -->
    <view class="overtime-form">
      <!-- 加班类型 -->
      <view class="form-item">
        <text class="form-label">加班类型</text>
        <view class="form-input-wrapper">
          <picker 
            :value="overtimeTypeIndex" 
            :range="overtimeTypes" 
            range-key="label" 
            @change="onOvertimeTypeChange"
          >
            <view class="picker-view">
              <text>{{ overtimeTypes[overtimeTypeIndex].label }}</text>
              <text class="iconfont icon-arrow-down"></text>
            </view>
          </picker>
        </view>
      </view>

      <!-- 加班时间 -->
      <view class="form-item">
        <text class="form-label">开始时间</text>
        <view class="form-input-wrapper">
          <picker 
            mode="date" 
            :value="startDate" 
            start="2023-01-01" 
            end="2023-12-31" 
            @change="onStartDateChange"
          >
            <view class="picker-view">
              <text>{{ startDate }}</text>
              <text class="iconfont icon-calendar"></text>
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">开始时段</text>
        <view class="form-input-wrapper">
          <picker 
            :value="startTimeIndex" 
            :range="timePeriods" 
            @change="onStartTimeChange"
          >
            <view class="picker-view">
              <text>{{ timePeriods[startTimeIndex] }}</text>
              <text class="iconfont icon-clock"></text>
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">结束时间</text>
        <view class="form-input-wrapper">
          <picker 
            mode="date" 
            :value="endDate" 
            start="2023-01-01" 
            end="2023-12-31" 
            @change="onEndDateChange"
          >
            <view class="picker-view">
              <text>{{ endDate }}</text>
              <text class="iconfont icon-calendar"></text>
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">结束时段</text>
        <view class="form-input-wrapper">
          <picker 
            :value="endTimeIndex" 
            :range="timePeriods" 
            @change="onEndTimeChange"
          >
            <view class="picker-view">
              <text>{{ timePeriods[endTimeIndex] }}</text>
              <text class="iconfont icon-clock"></text>
            </view>
          </picker>
        </view>
      </view>

      <!-- 加班时长 -->
      <view class="form-item">
        <text class="form-label">加班时长</text>
        <view class="form-input-wrapper">
          <text class="overtime-hours">{{ overtimeHours }}小时</text>
        </view>
      </view>

      <!-- 加班原因 -->
      <view class="form-item">
        <text class="form-label">加班原因</text>
        <view class="form-input-wrapper textarea-wrapper">
          <textarea 
            v-model="overtimeReason" 
            placeholder="请输入加班原因（必填）" 
            maxlength="200" 
            class="overtime-reason"
          ></textarea>
          <text class="word-count">{{ overtimeReason.length }}/200</text>
        </view>
      </view>

      <!-- 工作内容 -->
      <view class="form-item">
        <text class="form-label">工作内容</text>
        <view class="form-input-wrapper textarea-wrapper">
          <textarea 
            v-model="workContent" 
            placeholder="请输入加班工作内容（必填）" 
            maxlength="200" 
            class="overtime-reason"
          ></textarea>
          <text class="word-count">{{ workContent.length }}/200</text>
        </view>
      </view>

      <!-- 审批人 -->
      <view class="form-item">
        <text class="form-label">审批人</text>
        <view class="form-input-wrapper">
          <picker 
            :value="approverIndex" 
            :range="approvers" 
            range-key="name" 
            @change="onApproverChange"
          >
            <view class="picker-view">
              <text>{{ approvers[approverIndex].name }}</text>
              <text class="iconfont icon-arrow-down"></text>
            </view>
          </picker>
        </view>
      </view>

      <!-- 抄送人 -->
      <view class="form-item">
        <text class="form-label">抄送人</text>
        <view class="form-input-wrapper">
          <picker 
            mode="selector" 
            :value="ccPersonIndex" 
            :range="ccPersons" 
            range-key="name" 
            @change="onCcPersonChange"
          >
            <view class="picker-view">
              <text>{{ ccPersons[ccPersonIndex].name }}</text>
              <text class="iconfont icon-arrow-down"></text>
            </view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="button-area">
      <button class="submit-btn" @tap="submitOvertimeApplication">提交申请</button>
    </view>

    <!-- 提示弹窗 -->
    <view class="modal-mask" v-if="showModal" @tap="hideModal"></view>
    <view class="modal-container" v-if="showModal">
      <view class="modal-content">
        <view class="modal-icon">
          <text class="iconfont icon-success"></text>
        </view>
        <view class="modal-title">申请已提交</view>
        <view class="modal-desc">您的加班申请已提交，请等待审批</view>
      </view>
      <view class="modal-footer">
        <button class="modal-btn" @tap="goBack">返回考勤管理</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    const today = this.formatDate(new Date())
    
    return {
      // 加班类型选择
      overtimeTypeIndex: 0,
      overtimeTypes: [
        { label: '项目加班', value: 'project' },
        { label: '临时工作', value: 'temporary' },
        { label: '紧急任务', value: 'emergency' },
        { label: '其他', value: 'other' }
      ],
      
      // 时间选择
      startDate: today,
      endDate: today,
      startTimeIndex: 2,
      endTimeIndex: 3,
      timePeriods: ['上午', '下午', '晚上', '深夜'],
      
      // 加班时长（自动计算）
      overtimeHours: 3,
      
      // 加班原因和工作内容
      overtimeReason: '',
      workContent: '',
      
      // 审批人
      approverIndex: 0,
      approvers: [
        { name: '王主任（教务处）', id: 1 },
        { name: '李主任（人事处）', id: 2 },
        { name: '张校长', id: 3 }
      ],
      
      // 抄送人
      ccPersonIndex: 0,
      ccPersons: [
        { name: '不抄送', id: 0 },
        { name: '赵老师', id: 4 },
        { name: '钱老师', id: 5 },
        { name: '孙老师', id: 6 }
      ],
      
      // 提示弹窗
      showModal: false
    }
  },
  mounted() {
    // 初始计算加班时长
    this.calculateOvertimeHours()
  },
  methods: {
    // 导航返回
    goBack() {
      uni.navigateBack()
    },
    
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    
    // 加班类型变更
    onOvertimeTypeChange(e) {
      this.overtimeTypeIndex = e.detail.value
    },
    
    // 开始日期变更
    onStartDateChange(e) {
      this.startDate = e.detail.value
      
      // 如果开始日期大于结束日期，则同步更新结束日期
      if (new Date(this.startDate) > new Date(this.endDate)) {
        this.endDate = this.startDate
      }
      
      this.calculateOvertimeHours()
    },
    
    // 结束日期变更
    onEndDateChange(e) {
      this.endDate = e.detail.value
      
      // 如果结束日期小于开始日期，则同步更新开始日期
      if (new Date(this.endDate) < new Date(this.startDate)) {
        this.startDate = this.endDate
      }
      
      this.calculateOvertimeHours()
    },
    
    // 开始时段变更
    onStartTimeChange(e) {
      this.startTimeIndex = e.detail.value
      
      // 如果开始和结束是同一天，确保时间段合理
      if (this.startDate === this.endDate && this.startTimeIndex > this.endTimeIndex) {
        this.endTimeIndex = this.startTimeIndex
      }
      
      this.calculateOvertimeHours()
    },
    
    // 结束时段变更
    onEndTimeChange(e) {
      this.endTimeIndex = e.detail.value
      
      // 如果开始和结束是同一天，确保时间段合理
      if (this.startDate === this.endDate && this.endTimeIndex < this.startTimeIndex) {
        this.startTimeIndex = this.endTimeIndex
      }
      
      this.calculateOvertimeHours()
    },
    
    // 计算加班时长
    calculateOvertimeHours() {
      const startDate = new Date(this.startDate)
      const endDate = new Date(this.endDate)
      
      // 计算相差的天数
      const diffTime = Math.abs(endDate - startDate)
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
      
      // 简化计算逻辑，实际应用中需要更复杂的计算方式
      let hours = 0
      
      // 如果是同一天
      if (diffDays === 0) {
        // 计算时间段差，每个时间段假设3小时
        const timeDiff = this.endTimeIndex - this.startTimeIndex
        hours = timeDiff > 0 ? timeDiff * 3 : 3
      } 
      // 不是同一天
      else {
        // 每天按8小时计算
        hours = diffDays * 8
        
        // 加上时间段差异
        hours += (3 - this.startTimeIndex % 3) + (this.endTimeIndex % 3)
      }
      
      this.overtimeHours = Math.max(hours, 1)
    },
    
    // 审批人变更
    onApproverChange(e) {
      this.approverIndex = e.detail.value
    },
    
    // 抄送人变更
    onCcPersonChange(e) {
      this.ccPersonIndex = e.detail.value
    },
    
    // 提交加班申请
    submitOvertimeApplication() {
      // 表单验证
      if (this.overtimeReason.trim() === '') {
        uni.showToast({
          title: '请输入加班原因',
          icon: 'none'
        })
        return
      }
      
      if (this.workContent.trim() === '') {
        uni.showToast({
          title: '请输入工作内容',
          icon: 'none'
        })
        return
      }
      
      // 显示提交中
      uni.showLoading({
        title: '提交中...'
      })
      
      // 构建加班申请数据
      const overtimeData = {
        overtimeType: this.overtimeTypes[this.overtimeTypeIndex].value,
        startDate: this.startDate,
        startTimePeriod: this.timePeriods[this.startTimeIndex],
        endDate: this.endDate,
        endTimePeriod: this.timePeriods[this.endTimeIndex],
        overtimeHours: this.overtimeHours,
        reason: this.overtimeReason,
        workContent: this.workContent,
        approverId: this.approvers[this.approverIndex].id,
        ccPersonId: this.ccPersons[this.ccPersonIndex].id
      }
      
      console.log('加班申请数据:', overtimeData)
      
      // 模拟网络请求
      setTimeout(() => {
        uni.hideLoading()
        
        // 显示成功弹窗
        this.showModal = true
      }, 1500)
    },
    
    // 隐藏弹窗
    hideModal() {
      this.showModal = false
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f6f7fb;
  padding-bottom: 100rpx;
}

.header {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #4080ff;
  padding: 0 30rpx;
  color: #fff;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 40rpx;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    padding-right: 60rpx;
  }
}

.overtime-form {
  background: #fff;
  padding: 0 30rpx;
  
  .form-item {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    .form-label {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .form-input-wrapper {
      position: relative;
      
      .picker-view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        padding: 0 20rpx;
        background: #f8f8f8;
        border-radius: 8rpx;
        
        text {
          font-size: 28rpx;
          color: #333;
        }
        
        .iconfont {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .overtime-hours {
        display: flex;
        align-items: center;
        height: 80rpx;
        padding: 0 20rpx;
        background: #f8f8f8;
        border-radius: 8rpx;
        font-size: 28rpx;
        color: #333;
      }
      
      &.textarea-wrapper {
        padding: 20rpx;
        background: #f8f8f8;
        border-radius: 8rpx;
        position: relative;
        
        .overtime-reason {
          width: 100%;
          height: 200rpx;
          font-size: 28rpx;
          line-height: 1.5;
        }
        
        .word-count {
          position: absolute;
          right: 20rpx;
          bottom: 20rpx;
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

.button-area {
  padding: 40rpx 30rpx;
  
  .submit-btn {
    height: 90rpx;
    line-height: 90rpx;
    background: #4080ff;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
  }
}

// 弹窗样式
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  z-index: 101;
  
  .modal-content {
    padding: 50rpx 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .modal-icon {
      width: 120rpx;
      height: 120rpx;
      background: rgba(76, 175, 80, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30rpx;
      
      .iconfont {
        font-size: 60rpx;
        color: #4caf50;
      }
    }
    
    .modal-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .modal-desc {
      font-size: 28rpx;
      color: #666;
      text-align: center;
    }
  }
  
  .modal-footer {
    display: flex;
    border-top: 1rpx solid #f0f0f0;
    
    .modal-btn {
      flex: 1;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      color: #4080ff;
      font-weight: bold;
      background: #fff;
      border-radius: 0;
      margin: 0;
    }
  }
}
</style> 